<template>
	<view class="certification">
		<xx-title title="实名认证" />
		<view class="sign-body">
			<view class="sign-title">申请实名认证</view>
			<view class="sign-item">
				<view class="sign-label required">姓名</view>
				<view class="sign-value">
					<input type="text" v-model="state.model.name" placeholder="请输入姓名">
				</view>
			</view>
			<view class="sign-item">
				<view class="sign-label required">身份证号码</view>
				<view class="sign-value">
					<input type="idcard" v-model="state.model.idcard" placeholder="请输入身份证号码">
				</view>
			</view>

			<view class="project-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 24rpx)`}">
				<view class="personal-registration" @click="handleOk">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { formValidate, showModal } from '@/utils/tools';
	import { Certificate } from '@/api/user';
	import { useStore } from 'vuex';

	const store = useStore()
	const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)

	const state = reactive({
		model: {
			name: "",
			idcard: "",
		},
	});

	const formRule = {
		name: { message: '请输入用户名' },
		idcard: { message: '请输入身份证号码', patternType: 'idCard' },
	}

	const handleOk = async () => {
		await formValidate(state.model, formRule);
		const res = await Certificate({...state.model, openid: store.state.user.openId});
		if (res.code == 200) {
			showModal({ title: "温馨提示", content: '您已成功实名认证!', showCancel: false }).then(res => {
				uni.redirectTo({ url: '/pages/certificationInfo/certificationInfo' })
			})
		}
	}
</script>

<style scoped lang="scss">
	.certification {
		width: 100%;
		min-height: 100vh;
		padding-top: 1rpx;
		background-color: #F5F5F5;

		.sign-body {
			margin: 32rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 32rpx;

			.sign-title {
				padding: 24rpx 0;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #F5F5F5;
				font-weight: 500;
				// background-image: url("https://pro.star.ihehang.com/mini/static/icons/bg1.png");
				// background-size: cover;
			}

			.sign-item {
				padding: 24rpx 0;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #F5F5F5;

				&.center {
					align-items: center;
				}

				&:last-child {
					border-bottom: none;
				}

				.sign-label {
					color: #505363;
					font-size: 28rpx;
					width: 160rpx;

					&.required {
						position: relative;
						padding-left: 20rpx;

						&:before {
							content: '*';
							display: block;
							position: absolute;
							color: #ff3c3c;
							top: 0;
							left: 0;
						}
					}
				}

				.sign-value {
					width: calc(100% - 160rpx);
					font-size: 28rpx;
					color: #21252E;
					font-weight: 500;

					input {
						width: 100%;
						font-weight: 500;
					}

					textarea {
						background-color: #F5F5F5;
						border-radius: 12rpx;
						box-sizing: border-box;
						font-weight: 500;
						width: 100%;
						padding: 10rpx;
						height: 150rpx;
					}
				}
			}
		}
	}

	.project-btn {
		width: 100%;
		position: absolute;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		padding-left: 28rpx;
		padding-right: 28rpx;
		border-top: 1px solid #F1F2F4;
		padding-top: 14rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;

		.personal-registration {
			background: #92C75B;
			color: #FFFFFF;
			border-radius: 16rpx;
			width: 100%;
			padding: 16rpx 0;
			letter-spacing: 2rpx;
			font-weight: 500;
			text-align: center;

			&.disabled {
				background-color: #E5E5E5;
				color: #818496;
			}
		}
	}
</style>